<template>
  <section>
    <search-bar
      :filters="filters"
      :actions="actions"
      :pageNo.sync="pageNo"
      @search="handleSearch"
      @reset="handleReset"
      @action="handleAction"
      style="margin-bottom: 12px"
    />
    <el-card class="table-box" v-cloak>
      <template v-cloak>
        <div class="tab-btn-warp">
          <div class="right-btn">
            <!-- <button-conversion v-for="(action, index) in actions"
                               :key="index"
                               :value="action"
                               :filter="filterData"
                               @click="handleClick(action)" /> -->
          </div>
        </div>
      </template>
    </el-card>
  </section>
</template>

<script>
import { SearchBar } from "@tablra";

import { mapState } from "vuex";

export default {
  components: { SearchBar },
  name: "TableBox",
  props: {
    actions: {
      type: Array
    }
  },
  data() {
    return {
      pageSizeOptions: [10, 20, 50, 100],
      filterData: {},
      filters: [
        { name: "contractNo", label: "合同编号", type: "input" },
        { name: "fromTime", label: "发货时间", type: "daterange" }
      ],
      loading: true
    };
  },
  watch: {},
  computed: {
    // tableTotalFilter() {
    //   return
    // },
    mergedFilterData() {
      return {
        page: this.pageNo,
        size: this.pageSize,
        sort: this.sort,
        ...this.filterData,
        ...this.sortData
      };
    },
    ...mapState({
      menu: (state) => state.menu.menu,
      orderTableTotal: (state) => state.table.orderTableTotal
    })
  },
  created() {
    // 暂时写死  {menuId} 57 全部订单
    if (this.menu.menuId === 57) {
      this.$store.dispatch("table/orderSearchSum", this.mergedFilterData);
    }
  },
  methods: {
    handleAction(action) {
      this.$emit("action", action);
    },
    handleClick(action) {
      this.$emit("action", action);
    },
    handleSearch(filterData) {
      // this.pageNo = 1;
      // this.pageSize = 10;
      this.filterData = Object.assign({}, this.filterData, { ...filterData });
      this.$emit("search", this.mergedFilterData);
    },
    handleReset(filterData) {
      this.pageNo = 1;
      this.pageSize = 10;
      this.filterData = filterData;
      this.$emit("search", this.mergedFilterData);
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
[v-cloak] {
  display: none;
}
.table-style {
  /* width: 100%; */
  width: 99.9% !important;
  overflow: hidden;
}
.table-style >>> .el-icon-loading {
  font-size: 20px !important;
}
/* .table-box {
  position: relative;
} */
.table-box >>> .el-card__body {
  /* margin-top: 50px; */
  position: relative;
}
.right-btn {
  text-align: right;
  padding-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}

.el-pagination {
  padding: 20px 0px 0px 0px !important;
}

.pagination-box >>> .el-input .el-input__inner {
  height: 30px !important;
  /* text-align: center;
  align-items: center; */
}
.table-bottom-wrap {
  display: flex;
  font-size: 14px;
  justify-content: space-between;
}
.isShowTableTotal {
  justify-content: right;
}
</style>
